html {
  scroll-behavior: smooth;
}

body {
  @import '../../components/style/themes/default';
  @import '../../components/style/mixins';
  @include reset-scroll();
  margin: 0;
  color: $text-color;
  line-height: $line-height-base;
  font-size: $font-size-base;
  font-family: $font-family;
  background-color: $bg;
}
.dark body {
  @import '../../components/style/themes/dark';
  @import '../../components/style/mixins';
  @include reset-scroll();
  color: $text-color;
  background-color: $bg;
}

h1 {
  font-size: 2em;
}

input,
textarea {
  color: inherit;
}

.doc {
  display: grid;
  @media screen and (min-width: 960px) {
    grid-template-columns: 1fr 150px;
  }

  .md-table {
    width: 100%;
  }
  .preview-img {
    max-width: 320px;
  }
  .article {
    @media screen and (min-width: 960px) {
      margin-right: 32px;
    }
  }
  .toc-affix {
    @media screen and (max-width: 960px) {
      display: none;
    }
  }
  .toc-anchor {
    position: sticky;
    top: 100px;
  }
}

.demo-card {
  .demo-title {
    margin: 0;
    color: inherit;
    text-decoration: none;
  }
  .demo-anchor {
    position: relative;
    top: -80px;
  }
}

.dark .demo-card {
  background-color: #121212;
}

.component-demos {
  display: grid;
  gap: 18px;
  grid-template-columns: 100%;
  align-items: flex-start;
  @media screen and (max-width: 1280px) {
    grid-template-columns: 1fr !important;
  }
}
